<extend name="Public/base"/>
<block name="sidebar">
    <include file="sidemenu"/>
</block>
<block name="body">
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <link rel="stylesheet" type="text/css" href="__STATIC__/seatchart/jquery.seat-charts.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/seatchart/seat.style.css">
    <script src="__STATIC__/jquery-2.0.3.min.js"></script>
    <script src="__STATIC__/seatchart/jquery.seat-charts.js"></script>
    <div class="main-title">
        <h2>{:isset($info['id'])?'编辑':'新增'}舞台</h2>
    </div>
    <div class="tab-wrap">
        <ul class="tab-nav nav">
            <li data-tab="tab1" class="current"><a href="javascript:void(0);">基 础</a></li>
        </ul>
        <div class="tab-content">
            <form action="" method="post" class="form-horizontal">
                <!-- 基础 -->
                <div id="tab1" class="tab-pane in tab1">
                    <div class="form-item">
                        <label class="item-label">
                            名称<span class="check-tips">（名称不能为空）</span>
                        </label>
                        <div class="controls">
                            <input type="text" name="name" class="text input-large" value="{$info.name|default=''}">
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="item-label">
                            选择演唱会类型<span class="check-tips"></span>
                        </label>
                        <div class="controls">
                            <select name="category" id="category" class="input-large">
                                <option value="{$category['id']}">-->{$category['title']}<--</option>
                                <option value="148">个人演唱会</option>
                                <option value="149">跨年演唱会</option>
                                <option value="150">企业晚会</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="item-label">
                            选择表演<span class="check-tips">已选择:{$concert['title']}</span>
                        </label>
                        <div class="controls">
                            <select name="cid" id="concert" class="input-large">
                                <option value="{$info['cid']}">{$concert['title']}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="item-label">
                            舞台名称<span class="check-tips">(前台显示 默认:舞台)</span>
                        </label>
                        <div class="controls">
                            <input name="front" id="front" type="text" class="text input-large" value="{$info.front|default='舞台'}">
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="item-label">
                            观众席大小<span class="check-tips">(座,排)</span>
                        </label>
                        <div class="controls">
                            <input id="mwith" type="text" class="text input-small" value="{$info['size']|substr=0,2}">座x
                            <input id="mhigh" type="text" class="text input-small" value="{$info['size']|substr=3,2}">排
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="item-label">
                            舞台视图<span class="check-tips"></span>
                            <a id="showMap" class="btn btn-primary" style="background: red;" onclick="rechange()">重置舞台</a>
                        </label>
                        <div class="controls">
                            <div id="map">
                                <div id="seat-map"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-item">
                    <input type="hidden" name="id" value="{$info.id}">
                    <input type="hidden" id="size" name="size" value="{$info.size}">
                    <input type="hidden" id="seats" name="seats" value="{$info.seats}">
                    <button type="submit" id="submit" disabled="disabled" class="btn submit-btn ajax-post" target-form="form-horizontal">确 定</button>
                    <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
                </div>
            </form>
        </div>
    </div>
</block>

<block name="script">
    <script type="text/javascript">
        var sc;
        $(document).ready(function(){
            var str = "{$info['seats']}";
            var map = str.split(",");
            changeStage(map);
        });

        function rechange() {
            if(window.confirm('重置舞台不提交便可恢复，你确定要重置吗？')){
                changeStage([]);
                return true;
            }else{
                return false;
            }
        }

        function reBen() {
            if(window.confirm('禁用座位是不可逆的，你确定要禁用吗？')){
                var seats = $('.seatCharts-cell');
                var ss = '';
                var mwith = $('#mwith').val();
                var mhigh = $('#mhigh').val();
                var tmpwith = parseInt(mwith)+2;
                seats.each(function (index) {
                    if ((index + 1) % tmpwith != 1) {
                        if ($(this).hasClass('selected')||$(this).hasClass('seatCharts-space')) {
                            ss += '_';
                        } else if($(this).hasClass('seatCharts-seat')) {
                            ss += sc.get($(this).attr("id")).settings.character;
                        }
                    }
                    if ((index + 1) % tmpwith == 0 && (index+1) != seats.length) {
                        ss += ','
                    }
                });
                console.log(ss);
                $('#seats').val(ss);
//                console.log($('#seats').val());
                $('#size').val(mwith+'x'+mhigh);
                $('#submit').attr('disabled', false);
                return true;
            }else{
                return false;
            }
        }

        function changeStage(map) {
            $('.front').remove();
            $('#seat-map').remove();
            $('#booking-details').remove();
            $('#map').append("<div id='seat-map'></div><div id='booking-details' class='booking-details'><h2>请选择不可用座位<span class='check-tips'>(提交前请先确认座位!)</span></h2> <p>座位：</p><ul id='selected-seats'></ul><p>数量：<span id='counter'>0</span></p><br><a class='btn' id='btn_seat' onclick='reBen()'>确定座位</a></div>");
            $('#seat-map').append('<div class="front">' + $('#front').val() + '</div>');
            if (map.length>0){
                var maps = map;
            }else {
                var maps = setMap();
            }
            var seatLabel = 1;
            var last = 0;
            var cart = $('#selected-seats');
            var counter = $('#counter');
            var total = $('#total');
            sc = $('#seat-map').seatCharts({
                map: maps,
                seats: {
                    a: {
                        price: 100,
                        classes: 'first-class', //your custom CSS class
                        category: '头等舱'
                    }
                },
                naming: {
                    top: false,
                    getLabel: function (character, row, column) {
                        if (last != row) {
                            last = row;
                            seatLabel = 1;
                        }
                        if (character != '_') {
                            return seatLabel++;
                        } else {
                            return 0;
                        }
                    }
                },
                click: function () {
                    if (this.status() == 'available') {
                        $('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座<a href="#" class="cancel-cart-item">&times;</a></li>')
                                .attr('id', 'cart-item-' + this.settings.id)
                                .data('seatId', this.settings.id)
                                .appendTo(cart);
                        counter.text(sc.find('selected').length + 1);
                        total.text(recalculateTotal(sc) + this.data().price);
                        return 'selected';
                    } else if (this.status() == 'selected') {
                        //update the counter
                        counter.text(sc.find('selected').length - 1);
                        //and total
                        total.text(recalculateTotal(sc) - this.data().price);
                        //remove the item from our cart
                        $('#cart-item-' + this.settings.id).remove();
                        //seat has been vacated
                        return 'available';
                    } else if (this.status() == 'unavailable') {
                        //seat has been already booked
                        return 'unavailable';
                    } else {
                        return this.style();
                    }
                }
            });
            //this will handle "[x]" link clicks
            $('#selected-seats').on('click', '.cancel-cart-item', function () {
                //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
                sc.get($(this).parents('li:first').data('seatId')).click();
            });
        }

        $('#category').change(function () {
            var category = $('#category').val();
            $.ajax({
                type: "post",
                url: "{:U('Stage/getConcerts')}",
                data: {
                    category: category
                },
                success: function (data) {
                    var docs = data.docs;
                    $('#concert').empty();
                    console.log(docs);
                    if (docs) {
                        $('#concert').html('<option value="0">-- 请选择表演 --</option>');
                        for (var i = 0; i < docs.length; i++) {
                            $('#concert').append('<option value="' + docs[i].id + '">' + docs[i].title + '</option>')
                        }
                    }
                }
            });
        });
        function recalculateTotal(sc) {
            var total = 0;
            //basically find every selected seat and sum its price
            sc.find('selected').each(function () {
                total += this.data().price;
            });
            $('#submit').attr('disabled', true);
            return total;
        }
        function setMap() {
            var mwith = $('#mwith').val();
            var mhigh = $('#mhigh').val();
            var tmpmap = [];
            var str = '';
            for (var i = 0; i < mwith; i++) {
                str += 'a';
            }
            str += '_';
            for (var j = 0; j < mhigh; j++) {
                tmpmap.push(str)
            }
            return tmpmap;
        }
        //导航高亮
        highlight_subnav("{:U('Stage/index')}");
    </script>
</block>
